<template>
    <el-card class="account-container">
        <el-form  label-width="120px">
            <el-form-item label="商品名称" >
                <el-input  v-model="dishRequest.name" />
            </el-form-item>
            <el-form-item label="商品状态" >
                <el-select v-model="dishRequest.status" placeholder="选择商品状态">
                    <el-option label="上架商品" value="2" />
                    <el-option label="未上架商品" value="1" />
                </el-select>
            </el-form-item>
            <el-form-item label="排名等级" >
                <el-select v-model="dishRequest.level" placeholder="选择排名等级">
                    <el-option label="置顶" value="1" />
                    <el-option label="靠前" value="2" />
                    <el-option label="居中" value="3" />
                    <el-option label="靠后" value="4" />
                </el-select>
            </el-form-item>
            <el-form-item label="商品类别" >
                <el-select  v-model="typeValue" value-key="dishTypeId" placeholder="选择商品类别" @change="changeType">
                    <el-option
                            v-for="item in arrType"
                            :key="item.dishTypeId"
                            :label="item.typeName"
                            :value="item"
                    />
                </el-select>
                <el-select  v-model="categoryValue" value-key="id" placeholder="选择商品类别" @change="changeCategory">
                    <el-option
                            v-for="item in arrCategory"
                            :key="item.id"
                            :label="item.name"
                            :value="item"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="单价" >
                <el-input  style="width:100px; margin-right: 10px" placeholder="最小单价" v-model="dishRequest.beginPrice" />
                <el-input  style="width:100px"   placeholder="最大单价" v-model="dishRequest.endPrice" />
            </el-form-item>
            <el-form-item label="库存" >
                <el-input  style="width:100px; margin-right: 10px" placeholder="最小库存" v-model="dishRequest.beginInventory" />
                <el-input  style="width:100px; margin-right: 10px" placeholder="最大库存" v-model="dishRequest.endInventory" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchDishWith">查询</el-button>
            </el-form-item>
        </el-form>
        <div>
            <div style="margin-bottom: 20px">
                <el-row :gutter="20" style="position: relative">
                    <div class="bottom">
                        <span>商品列表</span>
                        <el-button type="primary" :icon="Search" style="position: absolute;right: 0" @click="function() {
                      router.push('/addgood')
                    }">添加商品</el-button>
                    </div>


                </el-row>
            </div>
    <el-table
            :data="tableData"
            style="width: 100%"
            border
    >
        <el-table-column width="200" label="商品状态">
            <template #default="props">
                <el-tag size="large" type="success" v-if="props.row.status===2" @click="changeStatus(props.row.id,1)">已上架</el-tag>
                <el-tag size="large" v-else type="info" @click="changeStatus(props.row.id,2)">未上架</el-tag>
            </template>
        </el-table-column>

        <el-table-column prop="name" label="名称" width="180" />
        <el-table-column width="200" prop="price" label="价格" />
        <el-table-column width="200" prop="inventory" label="库存" />
        <el-table-column label="Operations">
            <template #default="props">
                <el-button
                        type="primary"
                        @click="modifydish(props.row.id)"
                >编辑</el-button>
                <el-button
                        type="danger"
                        @click="changeStatus(props.row.id,-1)"
                >删除</el-button
                >
            </template>
        </el-table-column>
        <el-table-column type="expand">
            <template #default="props">
                <el-descriptions
                        direction="vertical"
                        :column="4"
                        :size="size"
                        border
                    >
                    <el-descriptions-item label="分类">{{props.row.typeName}}</el-descriptions-item>
                    <el-descriptions-item label="顺序">
                        <el-tag v-if="props.row.level==1" >置顶</el-tag>
                        <el-tag v-if="props.row.level==2" >靠前</el-tag>
                        <el-tag v-if="props.row.level==3" >居中</el-tag>
                        <el-tag v-if="props.row.level==4" >靠后</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="加入菜单时间">{{ props.row.createTime }}</el-descriptions-item>
                    <el-descriptions-item label="最后编辑时间">{{ props.row.updateTime }}</el-descriptions-item>
                    <el-descriptions-item label="商品图片:"
                    >
                        <div class="demo-image__preview">
                            <el-image
                                    style="width: 100px; height: 100px"
                                    :src="props.row.image"
                                    :zoom-rate="1.2"
                                    fit="cover"
                                    :preview-src-list="[props.row.image]"
                                    preview-teleported="true"
                            />
                        </div>
                    </el-descriptions-item
                    >
                    <el-descriptions-item label="商品描述">{{props.row.description}}</el-descriptions-item>
                </el-descriptions>
            </template>
        </el-table-column>

    </el-table>
            <el-row class="row-bg" justify="center">
                <el-pagination background layout="prev, pager, next" :current-page="pageNum" :total="dishTotal" pageSize="10" @current-change="handleCurrentChange"/>
            </el-row>
        </div>
    </el-card>
</template>

<script setup>
    import {useStore} from 'vuex'
    import {ref,reactive} from 'vue'
    import {useRouter} from 'vue-router'
    import { ElMessage } from 'element-plus'
    const router=useRouter()
    import axios from 'axios';
    const store=useStore()
    let tableData=ref();
    let input=ref();
    let pageNum=ref(1);
    let dishTotal=ref(0);
    let arrType=ref();
    let arrCategory=ref();
    let categoryValue=ref();
    let typeValue=ref();
    const dishRequest = reactive({
        pageSize:10,
        pageNum:1,
        merchantId:null,
        name:null,
        status:null,
        level:null,
        categoryId:null,
        beginPrice:null,
        endPrice:null,
        beginInventory:null,
        endInventory:null,
    })
    const handleCurrentChange=(val)=>{
        pageNum.value=val
        dishRequest.pageNum=val
        dishRequest.pageSize=10
        axios.post("api/merchant/getDishWith",dishRequest).then(
            res=>{
                tableData.value=res.data.data.list
            }
        )
    }

    const modifydish=(id)=>{
        router.push({
            path:'modifydish',
            query: {
                dishid: id
            }
        })
    }
    const changeStatus=(dishId1,status1)=>{

        axios.get("api/merchant/changeStatus",{
            params:{
                dishId:dishId1,
                status:status1
            }
        }).then(res=>{
            location.reload();
            ElMessage.success("更新成功");

        })
    }
    const changeType=(val)=>{
        console.log(val)
        axios.get("/api/merchant/getCategory", {
            params:{
                typeId:val.dishTypeId
            }
        }).then(res=>{
            arrCategory.value=res.data.data
        })
    }
    const changeCategory=(val)=>{
        dishRequest.categoryId=val.id
    }
    axios.get("/api/merchant/getDishType",{
    }).then(res=>{
        arrType.value=res.data.data;
        //   console.log(res)
    })
    const searchDishWith=()=>{
        console.log(dishRequest)
        axios.post("api/merchant/countDishWith",dishRequest).then(
            res=>{
                dishTotal.value=res.data.data
            }
        )
        dishRequest.pageNum=1
        dishRequest.pageSize=10
        axios.post("api/merchant/getDishWith",dishRequest).then(
            res=>{
                tableData.value=res.data.data.list
            }
        )
    }

    searchDishWith()
  /*  getMessage();*/
</script>


<style scoped>
    .demo-image__error .image-slot {
        font-size: 30px;
    }
    .demo-image__error .image-slot .el-icon {
        font-size: 30px;
    }
    .demo-image__error .el-image {
        width: 100%;
        height: 200px;
    }
</style>



<style>


</style>